<template>
  <el-main>
    <div class="el-main">
      <el-row>
        <el-col :span="5" v-for="item in list">
          <div class="div-card">
            <el-card shadow="always" style="height: 230px">
            <span>🐕{{item.categoryName}}</span><br>
            <span>🐎{{item.title}}</span><br>
            <span v-html="item.subTitle"></span><br>
            <span>🚀{{ item.brandName }}</span><br>
              <el-link type="primary" style="size: 20px" @click="to_detail(item.skuId)">商品详情</el-link>
            </el-card>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="this.query.pageNum"
            :page-sizes="[16, 12]"
            :page-size="this.query.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
      </el-row>
    </div>
  </el-main>
</template>

<script>
export default {
  name: "ListView",
  data() {
    return{
      query:{
        pageSize: null,
        pageNum: null
      },
      total:null,
      list:[],
    }
  },
  methods:{
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.query.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.query.pageNum = val;
      this.getList();
    },
    getList() {
      this.axios.get(this.$shopHost + 'api/spu/list',{params:this.query}).then(res => {
        console.log(res.data);
        this.list = res.data.data.list;
        this.query.pageNum = res.data.data.pageNum;
        this.query.pageSize = res.data.data.pageSize
        this.total = res.data.data.total;
      });
    },
    to_detail(skuId) {
      this.$router.push('/detail/'+skuId);
    },
  },
  created() {
    this.getList();
  }
}
</script>

<style scoped>
.div-card {
  width: 280px;
  height: 250px;
  margin-top: 5px;
}
.el-main {
  text-align: center;
  margin-left: 1%;
  margin-right: 1%;
}
</style>